<!-- 模板 -->
<template>
  <div class="root">
    <div class="detail" v-for="item in list" :key="item.id">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item><img :src="item.imgUrl" alt="" /></van-swipe-item>
        <van-swipe-item><img :src="item.imgUrl" alt="" /></van-swipe-item>
        <van-swipe-item><img :src="item.imgUrl" alt="" /></van-swipe-item>
        <van-swipe-item><img :src="item.imgUrl" alt="" /></van-swipe-item>
      </van-swipe>
      <div class="heads">
        <div class="banner">
          <span>¥{{ item.price }}</span>
          <div class="bt">
            <div class="item">
              <van-icon name="after-sale" size="0.4rem" />
              <div>降价通知</div>
            </div>
            <div class="item">
              <van-icon name="notes-o" size="0.4rem" />
              <div>收藏</div>
            </div>
          </div>
        </div>
        <h3>{{ item.name }}</h3>
        <div class="des">
          <span>满99减10</span>
          <span>满200减30</span>
          <span>满300减60</span>
          <span>满400减100</span>
        </div>
        <div class="txt">
          <span>专区9折，领卷享折上折！点击立即</span>
          <p>查看详情</p>
        </div>
      </div>

      <div class="shop">
        <p>
          <span>保障</span><i>{{ item.safeguard }}</i>
        </p>
        <p><span>选择</span><i>选择 · 尺码 · 颜色</i></p>
        <p><span>参数</span><i>品牌 · 材质 ...</i></p>
        <p>
          <span>活动</span><i>{{ item.event }}</i>
        </p>
        <p>
          <span>送至</span><i>{{ item.userAddress }}</i>
        </p>
        <p><span>运费</span><i>店铺单笔订单不满12元，收运费10元</i></p>
      </div>
    </div>

    <van-goods-action>
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="onAddCartClicked"
      />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        class="buy"
        @click="onBuyClicked()"
      />
    </van-goods-action>
    <div class="mask" v-show="show">
      <div class="sku" v-for="item in list" :key="item.id">
        <div class="header">
          <img :src="item.imgUrl" alt="" />
          <span>¥{{ item.price }}</span>
          <span class="span">券后¥{{ item.price }}起</span>
          <van-icon name="cross" @click="to" />
        </div>
        <div>
          <div class="safe">
            <span>服务保障</span>
            <span>{{ item.safeguard }}</span>
          </div>
          <div class="size">
            <div><span>L码</span><i>(根据您的尺码推荐)</i></div>
            <span>查看尺码></span>
          </div>
          <div class="color">
            <p>颜色</p>
            <div>
              <span
                @click="activeItem($event)"
                ref="span"
                v-for="(item, index) in color"
                :key="index"
                >{{ item }}</span
              >
            </div>
            <p>款式</p>
            <div>
              <span
                ref="select"
                @click="active($event)"
                v-for="(item, index) in select"
                :key="index"
                >{{ item }}</span
              >
            </div>
          </div>
          <div class="buy" @click="onBuyClicked()">领券购买</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import request from "../utils/request.js";
import { Toast } from "vant";
Toast.setDefaultOptions({ duration: 2000 });
export default {
  data() {
    return {
      list: [],
      color: [],
      select: [],
      id: 1,
      show: false,
      brand: "",
    };
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
    //获得商品id
    getId() {
      let id = sessionStorage.getItem("details-goodsId");
      console.log(id);
      if (!id) {
        id = 1;
      }
      this.id = id;
    },
    to() {
      this.show = !this.show;
    },
    //点击颜色
    activeItem(e) {
      let lis = this.$refs.span;
      for (let i = 0; i < lis.length; i++) {
        lis[i].className = "";
      }
      e.target.className = "active";
      console.log(e.srcElement.innerHTML);
      this.brand += e.srcElement.innerHTML;
    },
    //点击款式
    active(e) {
      let lis = this.$refs.select;
      for (let i = 0; i < lis.length; i++) {
        lis[i].className = "";
      }
      e.target.className = "active";
      this.brand += e.srcElement.innerHTML;
    },
    //选择样式接口
    async getByIdSelect() {
      let option = {
        url: "users/getByIdSelect",
        type: "get",
        data: {
          id: this.id,
          brand: this.brand,
        },
      };
      try {
        let { data: res } = await request(option);
        if (res.meta.status !== 200) {
          return console.log(res.meta.msg);
        }
        return console.log(res.meta.msg);
      } catch (error) {
        console.log(error);
      }
    },
    //加入购物车
    onAddCartClicked() {
      if (!this.brand) {
        Toast.fail("请选择款式");
        return this.to();
      }

      this.getByIdSelect();
      this.getByIdCart();
    },

    //添加 购物车接口
    async getByIdCart() {
      //存入商品id
      sessionStorage.setItem("cart-goodsId", JSON.stringify(this.id));
      let userId = this.getUserId();
      let options = {
        url: "users/getByIdCart",
        type: "get",
        data: {
          userId,
          goodsId: this.id,
          price: this.list[0].price,
          number: 1,
        },
      };
      try {
        let { data: res } = await request(options);
        if (res.meta.status !== 200) {
          return Toast.fail(res.meta.msg);
        }
        Toast.success(res.meta.msg);
        this.$router.push("/cart");
        console.log(res);
      } catch (error) {
        console.log(error);
      }
    },
    //获得用户id
    getUserId() {
      let str = sessionStorage.getItem("user-login");
      if (!str) {
        return alert("请先登录");
      }
      let userId = JSON.parse(str).data[0].id;
      console.log(userId);
      return userId;
    },
    // 点击购买
    onBuyClicked() {
      this.to();
      if (!this.brand) {
        return Toast.fail("请选择款式");
      }
      this.getByIdSelect();
      this.$router.push("/order");
    },
    async getGoods() {
      let option = {
        url: "users/getByIdGoods",
        type: "get",
        data: {
          id: this.id,
        },
      };
      try {
        let { data: res } = await request(option);
        if (res.meta.status !== 200) {
          return console.log(res.meta.msg);
        }
        this.list = res.data;
        console.log(this.list);
        for (let item in res.data[0]) {
          if (item.includes("style")) {
            if (res.data[0][item] !== null) {
              this.select.push(res.data[0][item]);
            }
          }
          if (item.includes("color")) {
            if (res.data[0][item] !== null) {
              this.color.push(res.data[0][item]);
            }
          }
        }
        // console.log(this.select, this.color);
      } catch (error) {
        console.log(error);
      }
    },
  },
  created() {},
  mounted() {
    this.getId();
    this.getGoods();
  },
};
</script>
<style lang="less" scoped>
// @import url(); 引入公共css类
.root {
  background: #e5e5e5;
  .detail {
    .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      // background-color: #39a9ed;
      img {
        display: block;
        width: 100%;
      }
    }
    .heads {
      padding: 0.2rem;
      background-color: #fff;
      .banner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        span {
          color: #ed2611;
          font-size: 0.4rem;
        }
        .bt {
          display: flex;
          .item {
            text-align: center;
            div {
              font-size: 0.2rem;
            }
            &:nth-of-type(1) {
              margin-right: 0.5rem;
            }
          }
        }
      }
      h3 {
        font-weight: normal;
        font-size: 0.32rem;
      }
      .des {
        padding: 0.2rem 0;
        span {
          color: #fff;
          font-size: 0.2rem;
          padding: 0.1rem;
          background: #ed2611;
          border-radius: 0.08rem;
          margin-right: 0.1rem;
        }
      }
      .txt {
        display: flex;
        justify-content: space-between;
        color: #999999;
        font-size: 0.2rem;
      }
    }
    .shop {
      padding: 0.2rem;
      background-color: #fff;
      margin: 0.5rem 0 1rem 0;
      p {
        padding: 0.1rem 0;
        span {
          font-size: 0.24rem;
          color: #333333;
        }
        i {
          padding-left: 0.05rem;
          font-style: normal;
          color: #666666;
          font-size: 0.2rem;
        }
      }
    }
  }
  .van-goods-action {
    padding: 0.1rem 0;
    height: 1.2rem;
    .van-goods-action-button {
      height: 1rem;
      font-size: 0.28rem;
    }
  }
  .van-sku-container {
    .header {
      padding: 0.32rem;
      display: flex;
      img {
        width: 2rem;
      }
      span {
        color: #ffba02;
        font-size: 0.4rem;
        margin-left: 0.32rem;
        &:nth-of-type(2) {
          background: #ffcf35;
          color: #fff;
          font-size: 0.24rem;
          padding: 0.1rem 0.2rem;
          border-radius: 0.2rem;
          height: 0.5rem;
          display: block;
        }
      }
    }
    .safe {
      display: flex;
      margin: 0 0.32rem;
      padding: 0.2rem;
      border-radius: 0.1rem;
      justify-content: space-between;
      background: #f5f5f5;
      color: #666666;
      font-size: 0.24rem;
    }
    .size {
      display: flex;
      justify-content: space-between;
      margin: 0.32rem 0.32rem 0 0.32rem;
      div {
        font-size: 0.24rem;
        span {
          background: #fcf1eb;
          color: #ffba02;
          border-radius: 0.2rem;
          padding: 0.1rem 0.15rem;
        }
        i {
          font-style: normal;
          color: #666666;
        }
      }
      span {
        color: #ffba02;
        font-size: 0.24rem;
      }
    }
    .color {
      margin: 0.32rem 0.32rem 0 0.32rem;
      p {
        color: #666666;
        font-size: 0.2rem;
      }
      div {
        width: 100%;
        span {
          display: inline-block;
          width: calc(33.33% - 0.16rem);
          background: #f5f5f5;
          border-radius: 0.1rem;
          text-align: center;
          padding: 0.1rem 0;
          margin: 0.15rem 0.16rem 0.15rem 0;
          font-size: 0.2rem;
          &:nth-of-type(3) {
            margin-right: 0;
          }
        }
      }
    }
    /deep/ .van-sku-actions .van-button {
      font-size: 0.2rem;
      height: 0.8rem;
    }
  }
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  .sku {
    position: fixed;
    width: 100%;
    bottom: 0;
    background-color: #fff;
    .header {
      width: 100%;
      padding: 0.32rem;
      display: flex;
      justify-content: space-between;
      img {
        width: 2rem;
      }
      span {
        color: #ffba02;
        font-size: 0.4rem;
        margin-left: 0.32rem;
        &:nth-of-type(2) {
          background: #ffcf35;
          color: #fff;
          font-size: 0.24rem;
          padding: 0.1rem;
          border-radius: 0.2rem;
          height: 0.5rem;
          min-width: 1.5rem;
          text-align: center;
        }
      }
      .van-icon {
        margin-left: 1rem;
        font-size: 0.4rem;
      }
    }
    .safe {
      display: flex;
      margin: 0 0.32rem;
      padding: 0.2rem;
      border-radius: 0.1rem;
      justify-content: space-between;
      background: #f5f5f5;
      color: #666666;
      font-size: 0.24rem;
    }
    .size {
      display: flex;
      justify-content: space-between;
      margin: 0.32rem 0.32rem 0 0.32rem;
      div {
        font-size: 0.24rem;
        span {
          background: #fcf1eb;
          color: #ffba02;
          border-radius: 0.2rem;
          padding: 0.1rem 0.15rem;
        }
        i {
          font-style: normal;
          color: #666666;
        }
      }
      span {
        color: #ffba02;
        font-size: 0.24rem;
      }
    }
    .color {
      margin: 0.32rem 0.32rem 0 0.32rem;
      p {
        color: #666666;
        font-size: 0.2rem;
      }
      div {
        width: 100%;
        span {
          display: inline-block;
          width: calc(33.33% - 0.16rem);
          background: #f5f5f5;
          border-radius: 0.1rem;
          text-align: center;
          padding: 0.1rem 0;
          margin: 0.15rem 0.16rem 0.15rem 0;
          font-size: 0.2rem;
          &:nth-of-type(3) {
            margin-right: 0;
          }
          &.active {
            background-color: #d1c4c4;
            color: red;
          }
        }
      }
    }
    .buy {
      margin: 0.8rem 0.32rem 0.1rem 0.32rem;
      background: #ffcf35;
      text-align: center;
      padding: 0.2rem 0;
      border-radius: 0.5rem;
      font-size: 0.32rem;
      color: #fff;
    }
  }
}
</style>
